<template>
  <div id="app">
    <div id="nav">
      <!-- {{ Aname }} <button v-on:click="AChange">a同步修改</button> <button v-on:click="AasyChange">a异步修改</button><br/>
      {{ Bname }} <button v-on:click="BChange">b同步修改</button> <button v-on:click="BasyChange">b异步修改</button><br/> -->
      <div class="svg-box">
        <svg>
          <use xlink:href="#icon-wx"></use>
        </svg>
        <app-icon icon-class="wx" svg-class-name="cp" @todo="handleTodo"
                  @click="callBack" />
      </div>
      <a target="_blank" href="myUser.html">myUser</a>
      <br />
      <button @click="$store.commit('add')">同步变更</button>{{this.$store.state.count}}
      <button @click="$store.dispatch('add')">异步变更</button>{{this.$store.state.count}}
      <br />
      {{ $store.getters.doubleCount }}
    </div>
    <router-link to="/home">home</router-link>|
    <router-link to="/about">about</router-link>
    <h2>mForm1</h2>
    <m-form />
    <!-- 使用响应式数据 -->
    <router-view />
  </div>
</template>

<script>
import MForm from '@components/mForm'
// import { mapState, mapMutations, mapActions } from 'vuex'
// import { createNamespacedHelpers } from 'vuex'
// const { mapState: AmapState, mapActions: AmapActions, mapMutations: AmapMutations } = createNamespacedHelpers('aModule')
// const { mapState: BmapState, mapActions: BmapActions, mapMutations: BmapMutations } = createNamespacedHelpers('bModule')

export default {
  name: 'App',
  components: { MForm },
  computed: {
    // ...AmapState({
    //   Aname: state => state.Aname
    // }),
    // ...BmapState({
    //   Bname: state => state.Bname
    // })
  },
  methods: {
    // ...AmapMutations({
    //   AchangeName: 'AchangeName'
    // }),
    // ...AmapActions({
    //   AasyChangeName: 'AasyChangeName'
    // }),
    // ...BmapMutations({
    //   BchangeName: 'BchangeName'
    // }),
    // ...BmapActions({
    //   BasyChangeName: 'BasyChangeName'
    // }),
    AChange() {
      debugger
      this.AchangeName('a江苏常州')
    },
    AasyChange() {
      this.AasyChangeName('a江苏苏州')
    },
    BChange() {
      this.BchangeName('b江苏常州')
    },
    BasyChange() {
      this.BasyChangeName('b江苏苏州')
    },
    callBack() {
      alert('callBack')
    },
    handleTodo() {
      console.log('handleTodo 222')
    }
  }
}
</script>

<style lang="less">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

#nav {
  padding: 30px;

  a {
    font-weight: bold;
    color: #2c3e50;

    &.router-link-exact-active {
      color: #42b983;
    }
  }
}

.ocean-typhoon {
  width: 100%;
  height: 100%;
}

.afterLine {
  stroke-dasharray: 10;
  stroke: #99b48f;
}

.hresToEnsMeanLine {
  stroke-dasharray: 10;
  stroke: #c17673;
}

.beforeLine {
  stroke: #c17673;
}

.typhoon-name {
  left: 14px !important;
  bottom: -35px !important;

  .leaflet-popup-content {
    margin: 5px;
    text-align: center;
  }

  .leaflet-popup-tip-container {
    transform: rotate(90deg);
    left: -8px;
    top: 6px;

    .leaflet-popup-tip {
      width: 10px;
    }
  }
}

.wrap-animate {
  .wf-line {
    width: 2px;
    height: 17px;
    background: #f0453d;
    position: absolute;
    top: 13px;
    left: 11px;
    z-index: -1;
    border-radius: 35% 35% 0 0;
  }

  .wf {
    width: 24px;
    height: 24px;
    // border: 1px red solid;
    animation: wf-run 4s linear infinite;

    .one {
      background: #f0453d;
      transform: rotate(120deg);
      transform-origin: bottom;
      box-shadow: 0 0 1px #000;
    }

    .two {
      background: #f0453d;
      transform: rotate(240deg);
      transform-origin: bottom;
      box-shadow: 0 0 1px #000;
    }

    .three {
      background: #f0453d;
      box-shadow: 0 0 1px #000;
    }

    .one,
    .two,
    .three {
      height: 10px;
      width: 2px;
      position: absolute;
      left: 10px;
      top: 2px;
      border-radius: 50%;
      z-index: 999;
    }
  }
}

@keyframes wf-run {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
</style>
